<template>
  <div class="ai_header_box">
    <div class="logo_box">
      <img src="../../assets/img/logo.svg" alt="">
    </div>

    <!-- 切换语言 -->
    <div class="tabBox_lang h_60 ">
      <div class="lang h_40 color_fff">
        <div class="w_25">
          <img class="full" src="../../assets/img/icon-lang.svg" alt="">
        </div>

         <el-dropdown class="lh_30 pl_5">
          <span class="el-dropdown-link">
            <span :class="{mon_lang: lang === '蒙文'}"> {{ pageLang || '中文' }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><div class="text_center" @click="changeLang('中文')">中文</div></el-dropdown-item>
            <el-dropdown-item><div class="text_center vertical" @click="changeLang('蒙文')">ᠮᠣᠩᠭᠤᠯ</div></el-dropdown-item>
            <el-dropdown-item><div class="text_center" @click="changeLang('英文')">English</div></el-dropdown-item>
            <el-dropdown-item><div class="text_center" @click="changeLang('日语')">日本語</div></el-dropdown-item>
            <el-dropdown-item><div class="text_center" @click="changeLang('西里尔文')">Кирилл</div></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    
    <!-- tab menu -->
    <div class="tab_menu_box nav" id="nav-tab" role="tablist">
      <div class="tab_item"
        :class="{ on: activeIndex == index, vertical: lang === '蒙文' }"
        v-for="(item, index) in tabList" :key="index"
        data-bs-toggle="tab" 
        :data-bs-target="item.targetId"
        role="tab" 
        :aria-controls="item.target"
        :aria-selected="index == 0 ? true : false"
        @click="clickTabMenu(index)">
        {{ $t(`${item.tabText}`) }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AiHeaderMobile',
    title: '',
    data() {
      return {
        lang: '中文',
        pageLang: '',
        activeIndex: 0,
        title: '',
        isShowTabMenu: false,
        tabList: [
          { title: 'Dayaar 翻译', tabText: 'fan_yi', url: '', targetId: '#nav-trans', target: 'nav-trans' },
          // { title: 'Dayaar 编码转换', tabText: '编码转换', url: '', targetId: '#nav-code', target: 'nav-code' },
          { title: 'Dayaar 蒙古文 OCR 识别', tabText: 'meng_gu_wen_ocr_shi_bie', url: '', targetId: '#nav-ocr', target: 'nav-ocr' },
          // { title: 'Dayaar 新旧蒙古文转换', tabText: '新旧蒙古文转换', url: '', targetId: '#nav-change', target: 'nav-change' },
          { title: 'Dayaar 语音识别', tabText: 'yu_yin_shi_bie', url: '', targetId: '#nav-voice', target: 'nav-voice' },
        ],
      }
    },
    methods: {
      changeLang(lang) {
        this.lang = lang 
        // this.$store.commit('changeLang', lang)
        if (lang === '中文') {
          this.$i18n.locale = 'zh'
          this.pageLang = '中文'
        } else if (lang === '蒙文') {
          this.pageLang = 'ᠮᠣᠩᠭᠤᠯ'
          this.$i18n.locale = 'mon'
        } else if (lang === '英文') {
          this.$i18n.locale = 'en'
          this.pageLang = 'English'
        } else if (lang === '日语') {
          this.$i18n.locale = 'jp'
          this.pageLang = '日本語'
        } else if (lang === '西里尔文') {
          this.$i18n.locale = 'cy'
          this.pageLang = 'Цириллиц'
        } 

        this.$emit('changeLang', lang)
      },
      clickTabMenu(index) {
        this.activeIndex = index
        this.title = this.tabList[index].title
        this.isShowTabMenu = false
      }
    }
  }
</script>

<style lang="less" scoped>
  .on { 
    color: #3372e2 !important;
  }

  .mon { 
    height: 80px !important;
    line-height: 30px !important;
    position: relative;
    top: -18px;
    writing-mode: vertical-lr; 
    font-family: 'mn'; 
    -webkit-text-orientation: sideways-right;
  }
  .vertical {
    writing-mode: vertical-lr;
    font-family: mn;
    -webkit-text-orientation: sideways-right;
    margin-left: 18px;
  }
  .mon_lang {
    writing-mode: vertical-lr;
    font-family: mn;
    -webkit-text-orientation: sideways-right;
    margin-top: 10px;
  }

  .ai_header_box {
    width: 100%;
    background-color: #232323;
    overflow: hidden;
    position: relative;

    .logo_box {
      width: 170px;
      height: 40px;
      float: left;
      padding: 5px;

      img { width: 100%; height: 100%;}
    }

    .tabBox_lang {
      width: calc(100% - 170px);
      height: 40px;
      float: right;
      position: absolute;
      top: 10px;
      right: 5px;


      .tab_box {
        position: absolute;
        right: 100px;
        top: 40px;
        .tab_item:hover { cursor: pointer; }
      }
      .tab_box:hover { cursor: pointer; }

      .lang {
        position: absolute;
        right: 0;
        bottom: 10px;
        padding: 0 5px;

        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        
      }
    }

    .tab_menu_box {
      width: 100%;
      height: 50px;
      padding: 5px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      background-color: #232323;
      margin-top: 40px;
      .tab_item {
        width: 200px;
        text-align: center;
        color: #fff;
        // border-bottom: 1px solid #fff;
      }
    }
  }

  @media screen and (min-width: 1800px) {
    .tab_box { width: 40%; }
  }
  @media screen and (min-width: 1600px) and (max-width: 1800px) {
    .tab_box { width: 45%; }
  }
  @media screen and (min-width: 1400px) and (max-width: 1599px) {
    .tab_box { width: 50%; }
  }
  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    .tab_box { width: 60%; }
  }
  @media screen and (min-width: 992px) and (max-width: 1199px) {
    .tab_box { width: 65%; }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .tab_box { width: 80%; }
  }
  @media screen and (max-width: 767px) {
    // .tab_box { display: none; }
    // .tab_item { display: none;  }
  }
</style>

<style scoped>
  .nav { flex-wrap: nowrap; display: block; }
  .el-dropdown-link {
    cursor: pointer;
    color: #fff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-dropdown-menu__item:hover {
    color: #fff !important;
    background-color: #3372e2 !important;
  }
</style>